<template>
  <section class="post-view">
    <el-card class="box-card">
      <div slot="header" class="el-header post-header">
        <h2>{{post.title}}</h2>
        <p>
          <el-tag><i class="el-icon-date"></i> {{post.updated_at|dateFormat('YYYY-MM-DD hh:mm:ss')}}</el-tag>
          <el-tag type="success"><i class="el-icon-edit"></i> {{post.author}}</el-tag>
          <el-tag type="warning"><i class="el-icon-news"></i> {{post.module|moduleFormat}}</el-tag>
          <el-tag type="danger"><i class="el-icon-star-on"></i> {{post.like?post.like:256}}</el-tag>
        </p>
      </div>
      <div class="text item">
        <div v-html="post.content" class="markdown-body"></div>
      </div>
      <div v-for="pic in post.pics" class="image" :key="pic">
          <img :src="pic">
      </div>
    </el-card>
  </section>
</template>

<script>
import {PostService} from '@/service/api'
import {Code} from '@/common/code'
import marked from 'marked'

export default {
  name: 'PostView',
  data: function () {
    return {
      post: {
        content: ''
      }
    }
  },
  filters: {
    moduleFormat: Code.moduleFormat
  },
  mounted: function () {
    this.viewDetail()
    marked.setOptions({
      renderer: new marked.Renderer(),
      gfm: true,
      tables: true,
      breaks: false,
      pedantic: false,
      sanitize: false,
      smartLists: true,
      smartypants: false
    })
  },
  watch: {
    '$route': 'viewDetail'
  },
  methods: {
    viewDetail: function () {
      let id = 0
      let module = ''
      if (new RegExp(`^[a-z]+$`).test(this.$route.params.id)) {
        module = this.$route.params.id
      } else {
        id = this.$route.params.id
      }
      PostService.one(id, module)
        .then(res => {
          if (res) {
            this.post = res.post
            this.post.content = marked(this.post.content)
          }
        })
    }
  }
}
</script>

<style scoped>
  .markdown-body {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    padding: 45px;
  }

  .post-header {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
  }

  @media (max-width: 767px) {
    .markdown-body {
      padding: 15px;
    }
  }
</style>
